<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">
<!-- 
	步骤一：在微信公众平台绑定安全域名
	 步骤二：后端接口实现 JS-SDK 配置需要的参数 
	 步骤三：页面实现 JS-SDk 中 config 的注入配置，并实现对成功和失败的处理

 -->
<%@ include file="/common/jsconfig.jspf" %>

<script type="text/javascript">  
  
  $(function(){
	  //获取当前页面的路径url,虽然我用location.href也可以获取,可能这样写是为了兼容性
	  var url = location.href.split('#')[0];
	  
	  //获取当前页面的路径url 发过去
	  $.post("${pageContext.request.contextPath}/wechatconfig/jssdk.do",{'url':url},function(data){
		  	//后台要转成json格式字符串这里才可以解析
		  	var result = eval("("+ data +")");
      		// 微信信息的以及调用的配置  
            wx.config({  
            debug : true, 
            appId: result.appId,  
            timestamp: result.timestamp,  
            nonceStr: result.nonceStr,  
            signature: result.signature,  
            jsApiList: ['checkJsApi', 'onMenuShareTimeline',
                        'onMenuShareAppMessage', 'onMenuShareQQ',
                        'onMenuShareWeibo', 'hideMenuItems',
                        'showMenuItems', 'hideAllNonBaseMenuItem',
                        'showAllNonBaseMenuItem', 'translateVoice',
                        'startRecord', 'stopRecord', 'onRecordEnd',
                        'playVoice', 'pauseVoice', 'stopVoice',
                        'uploadVoice', 'downloadVoice', 'chooseImage',
                        'previewImage', 'uploadImage', 'downloadImage',
                        'getNetworkType', 'openLocation', 'getLocation',
                        'hideOptionMenu', 'showOptionMenu', 'closeWindow',
                        'scanQRCode', 'chooseWXPay',
                        'openProductSpecificView', 'addCard', 'chooseCard',
                        'openCard']  
            });  
            

            wx.ready(function () {
            	alert('接入成功');
            	// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
            	  document.querySelector('#checkJsApi').onclick = function () {
            	    wx.checkJsApi({
            	      jsApiList: [
            	        'getNetworkType',
            	        'previewImage',
            	        'onMenuShareAppMessage'
            	      ],
            	      success: function (res) {
            	        alert(JSON.stringify(res));
            	      }
            	    });
            	  };
            	 
            	  //拍照或从手机相册中选择
            	  $("#chooseImage").click(function(){
            		  wx.chooseImage({
            			    count: 1, // 默认9
            			    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有(“原始”，“压缩)
            			    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有(“相册”，“相机”)
            			    success: function (res) {
            			        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            			        //alert(localIds);
            			        $("#chtest").attr("src",localIds);//确实可以
            			    }
            			});
            	  });
            	  
            	  
            });

            
            wx.error(function(res){
            	alert("接入失败");
            	//alert("接入失败"+res.errMsg);
            });
      		
		},"text");
	  
  });
  
		
  
</script>  

<title>js sdk</title>
 
</head>
<body>
 <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
 
 <button class="btn btn_primary" id="chooseImage">拍照或从手机相册中选图接口</button>
    
    
  <img alt="" src="" id="chtest" width="100px" height="100px"> 
  
</body>
</html>